<template>
    <el-row :gutter="20">
        <!--部门数据-->
        <el-col :span="6" :xs="24">
            <DeptSelectTree @confirm="deptConfirm"></DeptSelectTree>
        </el-col>
        <el-col :span="18" :xs="24">
            <!-- 表格数据 -->
            <el-table v-loading="loading" :data="tableData">
                <el-table-column label="角色编号" prop="id" width="100" align="center" />
                <el-table-column label="角色标识" prop="roleKey" :show-overflow-tooltip="true" width="100" />
                <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true"  />
                <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button type="warning" @click="doCancel(scope.row.id)" v-if="hasRole(scope.row.roleKey)">取消授权</el-button>
                            <el-button type="primary" @click="doGrant(scope.row.id)" v-else>授权</el-button>
                        </template>
                    </el-table-column>
            </el-table>
            <EleZh>
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"  @pagination="handleQuery" />
            </EleZh>
            
        </el-col>
    </el-row>
</template>
<script setup>
import Validator from '@/utils/Validator'
import DeptSelectTree from '../DeptSelectTree'
import { queryList } from '../../api/role'
import { queryRoles} from '../../api/user'
import {createOne, cancelOne} from '../../api/grant'
import useApp from '@/hooks'
const {$} = useApp()
const props = defineProps({
    userId:{
        type:[String,Number]
    },
})
const queryParams = ref({
    deptId: undefined,
    pageNum: 1,
    pageSize: 10,
    status: 1
})
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
const roleKeys = ref([])
// 计算函数
function hasRole(roleKey){
    return roleKeys.value.includes(roleKey)
}
//
function doCancel(roleId){
    cancelOne({
        roleId:roleId,
        userId:props.userId
    }).then(res=>{
        $.showToast({
            title:'取消成功',
            icon:'success'
        })
        getRoles()
        
    })
}
// 授权
function doGrant(roleId){
    createOne({
        roleId,
        userId:props.userId
    }).then(res=>{
        $.showToast({
            title:'授权成功',
            icon:'success'
        })
        getRoles()
        
    })
}
// 获取用户角色列表
function getRoles(){
    queryRoles(props.userId).then(res=>{
        let arr = res;
        roleKeys.value = arr.map(ele=>{
            return ele.roleKey
        })
        console.log(roleKeys.value)
    })
}
// 查询
function handleQuery() {
    loading.value = true;
    queryList(queryParams.value).then(response => {
        tableData.value = response.content;
        total.value = response.totalElements;
        loading.value = false;
    })
}
// 部门确认
function deptConfirm(e) {
    queryParams.value.deptId = e
    queryParams.value.pageNum = 1
    handleQuery()
}
// 初始化执行
handleQuery()
getRoles()
</script>